<template>
  <div ref="parentDiv">
    <div class="top-panel">
      <el-form :model="searchFormData" label-width="60px">
        <el-row :gutter="15" style="flex-wrap: wrap; flex-direction: row">
          <el-col :span="6">
            <el-form-item label="标题" prop="titleFuzzy">
              <el-input
                placeholder="请输入标题"
                v-model="searchFormData.titleFuzzy"
                clearable
                @keyup.enter="loadDataList"
                ><template #prefix
                  ><span class="iconfont icon-title"></span></template
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="searchFormData.status"
                clearable
                placeholder="请选择状态"
              >
                <el-option :value="0" label="草稿"></el-option>
                <el-option :value="1" label="已发布"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类" prop="categoryId">
              <el-select
                v-model="searchFormData.categoryId"
                clearable
                placeholder="请选择分类"
              >
                <el-option
                  v-for="(item, index) in categoryList"
                  :key="index"
                  :value="item.categoryId"
                  :label="item.categoryName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button plain color="#409eff" @click="loadDataList"
              >搜索</el-button
            >
          </el-col>
          <el-col :span="1">
            <el-button
              size="large"
              plain
              color="#7fc65a"
              @click="showEdit('add')"
              >新增博客</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <Table
      :columns="columns"
      :showPagination="false"
      :dataSource="tableData"
      :fetch="loadDataList"
      :options="tableOptinos"
    >
      <!-- 封面 -->
      <template #cover="{ row }">
        <Cover :cover="row.cover"></Cover>
      </template>
      <!-- 文章信息 -->
      <template #blogInfo="{ row }">
        <div>标题：{{ row.title }}</div>
        <div>分类：{{ row.categoryName }}</div>
        <div>作者：{{ row.nickName }}</div>
      </template>
      <!-- 类型 -->
      <template #typeName="{ row }">
        <div>
          类型：
          <span v-if="row.type == 0">原创</span>
          <span v-if="row.type == 1">转载</span>
        </div>
        <div v-if="row.type == 1">转载地址：{{ row.reprintUrl }}</div>
      </template>
      <!-- 状态 -->
      <template #statusName="{ row }">
        <span v-if="row.status == 1" style="color: green">{{
          row.statusName
        }}</span>
        <span v-else style="color: red">{{ row.statusName }}</span>
      </template>
      <!-- 时间 -->
      <template #time="{ row }">
        <div>创建时间：{{ row.createTime }}</div>
        <div>更新时间：{{ row.lastUpdateTime }}</div>
      </template>

      <template #operation="{ row }">
        <a
          href="javascript:void(0)"
          class="a-link"
          @click="showEdit('update', row)"
          v-if="userInfo.userId == row.userId"
          >修改</a
        >
        <span v-else>---</span>
        <el-divider direction="vertical" />
        <a
          href="javascript:void(0)"
          class="a-link"
          @click="delBlog(row)"
          v-if="userInfo.userId == row.userId"
          >删除</a
        >
        <span v-else>---</span>

        <el-divider direction="vertical" />
        <a
          href="javascript:void(0)"
          class="a-link"
          @click="showDetail(row.blogId)"
          >预览</a
        >
      </template>
    </Table>
    <!-- 新增/修改 弹窗 -->
    <BlogEdit
      ref="blogEditRef"
      :width="parentWidth"
      :height="parentHeight"
      @callback="loadDataList"
    ></BlogEdit>
    <!-- 详情 -->
    <BlogDetail
      ref="blogDetailRef"
      :width="parentWidth"
      :height="parentHeight"
    ></BlogDetail>
  </div>
</template>

<script setup>
import { getCurrentInstance, computed, reactive, ref } from "vue";
import VueCookies from "vue-cookies";
import BlogEdit from "./BlogEdit.vue";
import BlogDetail from "./BlogDetail.vue";
const { proxy } = getCurrentInstance();

const api = {
  loadCategory: "/category/loadAllCategory4Blog",
  loadDataList: "/blog/loadBlog",
  deleteBlog: "/blog/recoveryBlog",
};

const searchFormData = reactive({});

const categoryList = ref([]);

const loadCategoryList = async () => {
  let result = await proxy.Request({
    url: api.loadCategory,
  });
  categoryList.value = result.data;
};
loadCategoryList();

//列表
const columns = [
  {
    label: "封面",
    prop: "cover",
    width: 100,
    scopedSlots: "cover",
  },
  {
    label: "文章信息",
    prop: "categoryName",
    scopedSlots: "blogInfo",
  },
  {
    label: "编辑器",
    prop: "editorTypeName",
    width: 100,
  },
  {
    label: "类型",
    prop: "typeName",
    scopedSlots: "typeName",
  },
  {
    label: "评论",
    prop: "allowCommentTypeName",
    width: 75,
  },
  {
    label: "状态",
    prop: "statusName",
    width: 75,
    scopedSlots: "statusName",
  },
  {
    label: "时间",
    prop: "time",
    width: 250,
    scopedSlots: "time",
  },
  {
    label: "操作",
    prop: "operation",
    width: 150,
    scopedSlots: "operation",
  },
];

const userInfo = ref(VueCookies.get("userInfo") || {});

const tableData = ref({});
const tableOptinos = {
  extHeight: 50,
  stripe: true,
};

const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
  };
  Object.assign(params, searchFormData);

  let result = await proxy.Request({
    url: api.loadDataList,
    params: params,
  });
  if (!result) {
    return;
  }
  tableData.value = result.data; //ref()的用法
  // Object.assign(tableData,result.data); //reactive()的用法
};

const blogEditRef = ref(null);
const showEdit = (type, data) => {
  blogEditRef.value.init(type, data);
};

//删除
const delBlog = (data) => {
  proxy.Confirm(`你确定要删除 <b>${data.title}</b> 吗?`, async () => {
    let result = await proxy.Request({
      url: api.deleteBlog,
      params: {
        blogId: data.blogId,
      },
    });
    if (!result) {
      return;
    }
    loadDataList();
  });
};

// 详情
const blogDetailRef = ref();
const showDetail = (blogId) => {
  blogDetailRef.value.showDetail(blogId);
};

//给弹窗提供大小用
const parentDiv = ref({});
const parentHeight = ref(0);
const parentWidth = ref(0);
parentWidth.value = computed(() => parentDiv.value.offsetWidth);
parentHeight.value = computed(() => parentDiv.value.offsetHeight);
</script>

<style scoped lang="scss">
</style>